<template>
	<div class="home" :style="{ height: `${this.clientHeight}px` }">
		<div class="theme">
			<img src="@/static/images/gh.png" alt="" />
			<!-- <p class="title myfont">全省“枫桥式公安派出所”重点培育单位<br/>现场亮晒活动评分</p> -->
			<p class="title myfont">警务操作系统分局综合应用设计</p>
		</div>
		<img class="line" src="@/static/images/line.png" alt="" />
		<!-- <img class="bmrz" src="@/static/images/bmrz.png" alt="" /> -->
		<!-- <div class="selectUserType">
			<span>身份：</span>
			<span @click="selectUserType">{{ userText }}</span>
		</div> -->
		<div style="height: 70px"></div>
		<MySelect v-if="userType === 0" v-model="fj" label="单位" placeholder="请选择你的单位" />
		<div style="height: 10px"></div>
		<MyInput v-if="false" v-model="username" label="姓名" placeholder="请输入姓名" />
		<div class="confirm myfont" @click="confirm">确定</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import MyInput from '@/views/components/MyInput.vue';
import MySelect from '@/views/components/MySelect.vue';
import qs from 'qs';
import { Picker } from 'cube-ui';
import { IUserInfo } from '@/types/app';
export default Vue.extend({
	name: 'home',
	components: {
		MyInput,
		MySelect
	},
	data() {
		return {
			username: '',
			userType: 0, //NaN
			userText: '请选择身份',
			picker: Picker,
			fj: {} as { name: string; code: string },
			clientHeight:
				window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
		};
	},
	watch: {
		userType: {
			handler(n, o) {
				if (n === 1) this.fj = { code: '330100', name: '杭州市局' };
				if (n === 0) this.fj = { name: '', code: '' };
			},
			immediate: true
		}
	},
	created() {
		// window.addEventListener('resize', () => {
		// 	this.clientHeight = this.getClientHeight();
		// });
	},
	beforeDestroy() {
		window.picker = null;
	},
	methods: {
		getClientHeight() {
			return (
				window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
			);
		},
		selectUserType() {
			const self = this;
			if (!window.picker) {
				window.picker = this.$createPicker({
					title: '选择身份',
					data: [
						[
							{ text: '观众', value: 0 },
							{ text: '评委', value: 1 }
						]
					],
					onSelect: selectHandle,
					onCancel: cancelHandle
				});
			}

			window.picker.show();

			function selectHandle(selectedVal: any, selectedIndex: any, selectedText: any) {
				self.userType = selectedVal[0];
				self.userText = selectedText[0];
			}
			function cancelHandle() {}
		},
		confirm() {
			if (isNaN(this.userType)) {
				this.$createToast({
					type: 'txt',
					txt: '请选择身份'
				}).show();
				return;
			}
			// if (this.username == '') {
			// 	this.$createToast({
			// 		type: 'txt',
			// 		txt: '请输入姓名'
			// 	}).show();
			// 	return;
			// }
			if (this.userType === 0 && (this.fj.code == '' || this.fj.code == undefined)) {
				this.$createToast({
					type: 'txt',
					txt: '请选择分局'
				}).show();
				return;
			}
			// console.log(this.fj.code, this.username, this.userType);
			let loading = this.$createToast({
				txt: '请稍候...',
				mask: true
			});
			loading.show();
			this.$store
				.dispatch('login', {
					judgeName: this.fj.name + '领导',
					deptCode: this.fj.code
				})
				.then((res) => {
					console.log('success');
					loading.hide();
					this.$router.push('/pg');
				})
				.catch((err) => {
					console.log(err);
					loading.hide();
					this.$createDialog({
						type: 'alert',
						content: err.toString() || '未知错误'
					}).show();
				});
		}
	}
});
</script>

<style lang="less" scoped>
.home {
	height: 100vh;
	background: #0f0f9a url('~@/static/images/bg.png') 0 0 no-repeat;
	background-size: 100% 103%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.theme {
		width: 100%;
		text-align: center;
		margin-top: 50px;
		img {
			width: 120px;
		}
		.title {
			font-size: 72px;
			color: #f9d574;
			padding: 34px 0 120px 0;
		}
	}

	.line {
		width: 100%;
	}

	.bmrz {
		width: 240px;
		margin-top: 57px;
		margin-bottom: 100px;
	}

	.selectUserType {
		font-size: 28px;
		color: #fff;
		margin-top: 70px;
		margin-bottom: 100px;
		span {
			&:last-child {
				border-bottom: 1px solid #fff;
			}
		}
	}

	.confirm {
		width: 249px;
		height: 79px;
		line-height: 79px;
		text-align: center;
		background: url('~@/static/images/btn.png') 0 0 no-repeat;
		background-size: 249px 79px;
		color: #24e5e5;
		margin-top: 188px;
	}
}
</style>
